<template>
  <div class="brand-detail-info">
    <!-- 基础信息 -->
    <div class="info-section">
      <h3 class="section-title">基础信息</h3>
      <el-row :gutter="24">
        <el-col :span="8">
          <div class="info-item">
            <label class="info-label">品牌名称:</label>
            <span class="info-value">{{ brandData.brandName }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label class="info-label">经营模式:</label>
            <el-tag :type="getOperationModeType(brandData.operationMode) as 'success' | 'info' | 'warning' | 'primary' | 'danger'">
              {{ brandData.operationMode }}
            </el-tag>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label class="info-label">更新时间:</label>
            <span class="info-value">{{ formatDateTime(brandData.updateTime) }}</span>
          </div>
        </el-col>
      </el-row>
      
      <el-row :gutter="24" class="mt-4">
        <el-col :span="8">
          <div class="info-item">
            <label class="info-label">一级类目:</label>
            <span class="info-value">{{ brandData.firstCategory }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label class="info-label">二级类目:</label>
            <span class="info-value">{{ brandData.secondCategory }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label class="info-label">三级类目:</label>
            <span class="info-value">{{ brandData.thirdCategory }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 核心指标 -->
    <div class="info-section">
      <h3 class="section-title">核心指标</h3>
      <el-row :gutter="16">
        <el-col :span="6">
          <div class="metric-card views">
            <div class="metric-icon">
              <el-icon><View /></el-icon>
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ formatNumber(brandData.pageViews) }}</div>
              <div class="metric-label">浏览量</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="metric-card visitors">
            <div class="metric-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ formatNumber(brandData.visitorCount) }}</div>
              <div class="metric-label">访客数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="metric-card conversion">
            <div class="metric-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ formatPercentage(brandData.conversionRate) }}</div>
              <div class="metric-label">转化率</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="metric-card amount">
            <div class="metric-icon">
              <el-icon><Money /></el-icon>
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ formatCurrency(brandData.transactionAmount) }}</div>
              <div class="metric-label">成交金额</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 详细数据 -->
    <div class="info-section">
      <h3 class="section-title">详细数据</h3>
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="data-group">
            <h4 class="group-title">流量数据</h4>
            <div class="data-list">
              <div class="data-item">
                <span class="data-label">人均浏览量:</span>
                <span class="data-value">{{ brandData.avgPageViewsPerVisitor.toFixed(2) }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">平均停留时长:</span>
                <span class="data-value">{{ formatTime(brandData.avgStayTime) }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">访客数:</span>
                <span class="data-value">{{ formatNumber(brandData.visitorCount) }}</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="data-group">
            <h4 class="group-title">交易数据</h4>
            <div class="data-list">
              <div class="data-item">
                <span class="data-label">成交人数:</span>
                <span class="data-value">{{ formatNumber(brandData.transactionUserCount) }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">成交单量:</span>
                <span class="data-value">{{ formatNumber(brandData.transactionOrderCount) }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">成交件数:</span>
                <span class="data-value">{{ formatNumber(brandData.transactionItemCount) }}</span>
              </div>
              <div class="data-item">
                <span class="data-label">客单价:</span>
                <span class="data-value">{{ formatCurrency(brandData.averageTransactionValue) }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 性能评估 -->
    <div class="info-section">
      <h3 class="section-title">性能评估</h3>
      <div class="performance-grid">
        <div class="performance-item">
          <div class="performance-header">
            <span class="performance-name">流量表现</span>
            <el-tag :type="getPerformanceLevel(trafficScore).type as 'success' | 'info' | 'warning' | 'primary' | 'danger'" size="small">
              {{ getPerformanceLevel(trafficScore).text }}
            </el-tag>
          </div>
          <el-progress
            :percentage="trafficScore"
            :color="getProgressColor(trafficScore)"
            :stroke-width="8"
          />
        </div>

        <div class="performance-item">
          <div class="performance-header">
            <span class="performance-name">转化表现</span>
            <el-tag :type="getPerformanceLevel(conversionScore).type as 'success' | 'info' | 'warning' | 'primary' | 'danger'" size="small">
              {{ getPerformanceLevel(conversionScore).text }}
            </el-tag>
          </div>
          <el-progress
            :percentage="conversionScore"
            :color="getProgressColor(conversionScore)"
            :stroke-width="8"
          />
        </div>

        <div class="performance-item">
          <div class="performance-header">
            <span class="performance-name">营收表现</span>
            <el-tag :type="getPerformanceLevel(revenueScore).type as 'success' | 'info' | 'warning' | 'primary' | 'danger'" size="small">
              {{ getPerformanceLevel(revenueScore).text }}
            </el-tag>
          </div>
          <el-progress
            :percentage="revenueScore"
            :color="getProgressColor(revenueScore)"
            :stroke-width="8"
          />
        </div>

        <div class="performance-item">
          <div class="performance-header">
            <span class="performance-name">综合评分</span>
            <el-tag :type="getPerformanceLevel(overallScore).type as 'success' | 'info' | 'warning' | 'primary' | 'danger'" size="small">
              {{ getPerformanceLevel(overallScore).text }}
            </el-tag>
          </div>
          <el-progress
            :percentage="overallScore"
            :color="getProgressColor(overallScore)"
            :stroke-width="8"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { View, User, TrendCharts, Money } from '@element-plus/icons-vue'
import type { BrandPerformanceData } from '@/types/distribution'

// Props
interface Props {
  brandData: BrandPerformanceData
}

const props = defineProps<Props>()

// 计算性能评分
const trafficScore = computed(() => {
  // 基于浏览量和访客数计算流量评分
  const views = props.brandData.pageViews
  const visitors = props.brandData.visitorCount
  return Math.min(Math.round((views / 10000 + visitors / 1000) * 10), 100)
})

const conversionScore = computed(() => {
  // 基于转化率计算转化评分
  const rate = props.brandData.conversionRate
  return Math.min(Math.round(rate * 20), 100)
})

const revenueScore = computed(() => {
  // 基于成交金额计算营收评分
  // 后端返回的amount已经是万元单位，所以直接使用
  const amount = props.brandData.transactionAmount
  // 假设100万元为满分基准
  return Math.min(Math.round(amount / 100 * 100), 100)
})

const overallScore = computed(() => {
  // 综合评分
  return Math.round((trafficScore.value + conversionScore.value + revenueScore.value) / 3)
})

// 工具函数
function formatNumber(num: number): string {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toLocaleString()
}

function formatCurrency(num: number): string {
  return '¥' + num.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

function formatPercentage(num: number): string {
  return num.toFixed(2) + '%'
}

function formatTime(seconds: number): string {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  if (minutes > 0) {
    return `${minutes}分${remainingSeconds}秒`
  }
  return `${remainingSeconds}秒`
}

function formatDateTime(dateStr: string): string {
  return new Date(dateStr).toLocaleString('zh-CN')
}

function getOperationModeType(mode: string): string {
  const typeMap: Record<string, string> = {
    '直营': 'success',
    '代销': 'warning',
    '经销': 'primary'
  }
  return typeMap[mode] || 'info'
}

function getPerformanceLevel(score: number): { type: string; text: string } {
  if (score >= 80) return { type: 'success', text: '优秀' }
  if (score >= 60) return { type: 'primary', text: '良好' }
  if (score >= 40) return { type: 'warning', text: '一般' }
  return { type: 'danger', text: '待改进' }
}

function getProgressColor(score: number): string {
  if (score >= 80) return '#67c23a'
  if (score >= 60) return '#409eff'
  if (score >= 40) return '#e6a23c'
  return '#f56c6c'
}
</script>

<style scoped lang="scss">
.brand-detail-info {
  .info-section {
    margin-bottom: 32px;

    &:last-child {
      margin-bottom: 0;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid #e5e7eb;
    }

    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      .info-label {
        font-weight: 500;
        color: #6b7280;
        margin-right: 8px;
        min-width: 80px;
      }

      .info-value {
        color: #1f2937;
        font-weight: 500;
      }
    }

    .metric-card {
      display: flex;
      align-items: center;
      padding: 20px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      transition: all 0.3s ease;

      &:hover {
        border-color: #409eff;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
      }

      .metric-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;

        .el-icon {
          font-size: 24px;
          color: white;
        }
      }

      .metric-content {
        .metric-value {
          font-size: 20px;
          font-weight: 700;
          color: #1f2937;
          margin-bottom: 4px;
        }

        .metric-label {
          font-size: 14px;
          color: #6b7280;
        }
      }

      &.views .metric-icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      &.visitors .metric-icon {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      &.conversion .metric-icon {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      &.amount .metric-icon {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
    }

    .data-group {
      padding: 20px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e5e7eb;

      .group-title {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 16px;
      }

      .data-list {
        .data-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 0;
          border-bottom: 1px solid #e5e7eb;

          &:last-child {
            border-bottom: none;
          }

          .data-label {
            color: #6b7280;
            font-size: 14px;
          }

          .data-value {
            color: #1f2937;
            font-weight: 600;
            font-size: 14px;
          }
        }
      }
    }

    .performance-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;

      .performance-item {
        padding: 20px;
        background: #f8fafc;
        border-radius: 12px;
        border: 1px solid #e5e7eb;

        .performance-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;

          .performance-name {
            font-weight: 600;
            color: #1f2937;
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    .info-section {
      .performance-grid {
        grid-template-columns: 1fr;
      }

      .metric-card {
        flex-direction: column;
        text-align: center;

        .metric-icon {
          margin-right: 0;
          margin-bottom: 12px;
        }
      }
    }
  }
}
</style> 